<template>
    <div class='container'>
        <div class="input-container">
            <t-input-number v-model="year" label="年份" class="year-input" />
            <t-input v-model="action" label="事件" class="action-input" @enter="handleEnter" />
            <t-tagInput v-model="tags" label="标签" class="tag-input" />
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next'
import { addHistoryActionAPI } from '@/api/subject_history';
// 输入取
const year = ref<number>(Number(new Date().getFullYear()));
const action = ref('');
const tags = ref<string[]>([]);
const handleEnter = async () => {
    console.log(year.value, action.value);
    if (!year.value || !action.value) {
        MessagePlugin.error('请输入年份和事件');
        return;
    }
    const res = await addHistoryActionAPI(year.value, action.value, tags.value);
    // @ts-ignore
    if (res.code === 200) {
        // @ts-ignore
        MessagePlugin.success(`年份：${year.value}-${res.msg}-${res.data.result}`);
        year.value = Number(new Date().getFullYear());
        action.value = '';
        tags.value = [];
    } else {
        // @ts-ignore
        MessagePlugin.error(`添加失败：${res.msg}`);
    }
}

</script>
<style lang='scss' scoped>
.container {
    width: 90%;
    margin: 0 auto;
}

.input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    .year-input {

        width: 200px;
    }

    .action-input {
        flex: 1;
    }

    .tag-input {
        width: 300px;
    }
}
</style>